<template>
  <div>
    <el-divider />
    <transfer ref="transfer" @selected="selected" />

    <el-divider />

    <el-divider> 请输入消息 </el-divider>

    <div style="width: 650px; margin: 50px auto">
      <el-switch
        v-model="isAtAll"
        active-text="@全体"
        inactive-text="不@全体"
      />
      <el-input
        v-model="content"
        type="textarea"
        :autosize="{ minRows: 12, maxRows: 100}"
        placeholder="请输入内容"
      />
    </div>

    <el-divider> 请选择文件 </el-divider>

    <div style="text-align: center;margin: 50px auto;width: 500px; height:300px;">
      <upload ref="upload" @onChange="onChange" />
    </div>
    <el-divider> 点击发送 </el-divider>

    <div style="text-align: center;margin: 50px auto;">
      <el-button type="primary" round @click="sendMessage">发送</el-button>
    </div>
  </div>
</template>

<script>
import { sendGroupMessage, fileUpload } from '@/api/bot'
import transfer from './ChildCpm/transfer'
import upload from './ChildCpm/upload'
export default {
  components: {
    upload,
    transfer
  },
  data() {
    return {
      selectArray: [],
      content: '',
      isAtAll: false,
      fileList: []
    }
  },
  methods: {
    onChange(fileList) {
      this.fileList = fileList
      console.log(this.fileList)
    },
    selected(arr) {
      this.selectArray = arr
      console.log(this.selectArray)
    },
    sendMessage() {
      if (this.selectArray.length === 0) this.$message({ type: 'warning', message: '请选择需要发送的群' })

      for (const i of this.selectArray) {
        const _1 = []
        if (this.isAtAll) _1.pop({ type: 'AtAll' })
        _1.push({ type: 'Plain', text: this.content })
        for (const j of this.fileList) {
          fileUpload(i, j.raw).catch(err => {
            this.$message.error(err)
            return
          })
        }

        sendGroupMessage(i, _1).catch(err => {
          this.$message.error(err)
          return
        })
      }
      // 清空状态
      this.$refs.transfer.selected = []
      this.$refs.upload.$refs.uploads.clearFiles()
      this.selectArray = []
      this.content = ''
      this.isAtAll = false
      this.$message({
        type: 'success',
        message: '发送成功'
      })
    }
  }
}
</script>

<style scoped>
.el-transfer-panel{
  width: 400px;
}
</style>
